<template>
	<view>
		<map :style="'width:' + width + '; height: ' + height + ';'" :latitude="latitude" scale=5 :longitude="longitude"
			:markers="covers" @markertap="handleMarkerTap">
		</map>
		<u-popup :show="show" :round="10" mode="bottom" @close="show = false" @open="open">
			<view class="station">
				<view></view>
				<view>
					<view>{{ station.name }}</view>
					<view>地址：{{ station.address }}</view>
					<view>
						<u-button type="primary" text="导航到站" @click="handleOpenLocation"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import covers from "./covers"
export default {
	data() {
		return {
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [],
			show: false,
			station: {
				pic: "",
				name: "光山县盛湾村甲醇站",
				address: "官渡河产业集聚区盛湾村",
			}
		};
	},
	props: {
		width: {
			type: String | Number,
			default: "100wh",
		},
		height: {
			type: String | Number,
			default: "100vh",
		}
	},
	watch: {

	},
	created() {
		this.getMapLocation().then(() => {
			let v = covers.stationList
			let i = 1

			for (i = 0; i < v.length; i++) {
				v[i].id = i + 2
				console.log(v[i].id)
			}

			this.covers = this.covers.concat(v)
		})
	},
	methods: {
		init() {
			this.overlayShow = false;
			this.selData = [];
			this.nowIndex = 0;
			this.pinyinArr = [];
			this.addressList = [];
			this.chooseShow = true;

			// this.getinfo();
		},
		getMapLocation() {
			return new Promise((resolve, rej) => {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.covers.push(
							{
								id: 100000,
								latitude: res.latitude,
								longitude: res.longitude,
								callout: {
									content: "我",
									fontSize: 12,
									display: "ALWAYS"
								}
							}
						)
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						resolve()
					}
				});
			})
		},
		handleMarkerTap(e) {
			let { markerId } = e.detail
			if (markerId == 100000) { return }
			this.show = true
			const v = this.covers
			v.forEach((item, index) => {
				if (item.id == markerId) {
					this.station.name = item.stationName
					this.station.address = item.address
					this.station.longitude = item.longitude
					this.station.latitude = item.latitude
				}
			})
			console.log(e.detail, "eeeeeeeeeeeee")
		},
		open() {

		},
		handleOpenLocation() {
			const latitude = Number(this.station.latitude)
			const longitude = Number(this.station.longitude)
			console.log(typeof (latitude), "1111")
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				success: function () {
					console.log('success');
				}
			});
		}
	},
};
</script>

<style lang="scss" scoped>
.station {
	padding: 20rpx;

	view {
		padding: 5px 0
	}
}
</style>